<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>循环结构</title>
</head>

<body>
    <script>
        //循环打印图形
        //*****
        for (var i = 0; i < 5; i++) {
            document.write('*')
        }

        //打印图形
        /*
            ****
            ****
            ****
        */
        //双重循环
        //外层循环控制 行数 3
        for (var i = 0; i < 3; i++) {
            //内层控制每行*的个数
            for (var j = 0; j < 4; j++) {
                document.write('*')
            }
            document.write('<br>')
        }

        //打印如下图形
        /*
                         行号i       每行*的个数
             *             1             1
             **            2             2
             ***           3             3
             ****          4             4
             *****         5             5
                                     *的个数==行号
        */
        //外层循环控制行数
        for (var i = 1; i < 5; i++) {
            //内层循环控制每行*的个数
            for (var j = 1; j < i; j++) {
                document.write('*')
            }
            document.write('<br>')
        }

        //打印图形
        /*
                          行号i       每行*的个数
              *             1             1
              ***           2             3
              *****         3             5
              *******       4             7
              *********     5             9
                                      *的个数==2*行号-1
         */
        for (var i = 1; i <= 5; i++) {
            for (var j = 1; j <= 2 * i - 1; j++) {
                document.write('*')
            }
            document.write('<br>')
        }
        // var str = '';
        // for (var i = 1; i <= 5; i++) {
        //     for (var j = 1; j <= 2 * i - 1; j++) {
        //         str += '*'
        //     }
        //     str += '\n'
        // }
        // console.log(str);

        //
        //2. 打印如下图形    
        /*
                       行号i=    每行星的个数       空格的个数
            *             1           1               4
           ***            2           3               3
          *****           3           5               2
         *******          4           7               1
        *********         5           9               0
                                *==2*行号-1    空格数=总行数-行号
        */
        var str = '';
        for (var i = 1; i <= 5; i++) {
            for (var k = 1; k <= 5 - i; k++) {
                str += ' ';
            }
            for (var j = 1; j <= 2 * i - 1; j++) {
                str += '*'
            }
            str += '\n'
        }

        console.log(str);

        var str = '';
        for (var i = 1; i <= 5; i++) {
            for (var k = 1; k <= 5 - i; k++) {
                str += '&nbsp;';
            }
            for (var j = 1; j <= 2 * i - 1; j++) {
                str += '*'
            }
            str += '<br>'
        }
        document.write(str)

        //
        //3. 打印如下图形    
        /* 
                       行号i=       每行星的个数       空格的个数
         *********       5            9               0
          *******        4            7               1
           *****         3            5               2
            ***          2            3               3
             *           1            1               4
                              *数==2*行号-1   空格数=总行数-行号
 
        */

        var str = '';
        for (var i = 5; i >= 1; i--) {
            for (var k = 1; k <= 5 - i; k++) {
                str += ' ';
            }
            for (var j = 1; j <= 2 * i - 1; j++) {
                str += '*'
            }
            str += '\n'
        }

        console.log(str);

        var str = '';
        for (var i = 5; i >= 1; i--) {
            for (var k = 1; k <= 5 - i; k++) {
                str += '&nbsp;';
            }
            for (var j = 1; j <= 2 * i - 1; j++) {
                str += '*'
            }
            str += '<br>'
        }
        document.write(str)
    </script>
</body>

</html>